<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>画室首页</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/css/studio.css" />
    <link href="css/css/top_bar.css" rel="stylesheet" type="text/css">

<!--     <link rel="stylesheet/less" type="text/css" href="css/less/studio.less" />
    <link href="css/top_bar.less" rel="stylesheet/less" type="text/css"> -->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="header">
      <div class="row" id="top_bar">
        <div class="fixed_div">  <!-- fixed_div -->
          <div class="webTitle">
            <a href="/index.html">
              <img src="image/art_logo.png">
            </a>
          </div>
          <div class="search">
            <img src="image/search.png">
            <input type="text" placeholder="搜索画室、标签">
          </div>
          <div class="switch-pages">
            <a href="/index.html"><span class="top_btn">首页</span></a>
            <a href="/Q&A.html"><span class="top_btn">问答</span></a>
            <a href="/gallery.html"><span class="top_btn active">资料</span></a>
          </div>
          <div class="operation-btns">
            <span class="log_reg" data-toggle="modal" data-target="#logModal">登录</span>
            <span class="log_reg" data-toggle="modal" data-target="#regModal">注册</span>
            <div class="user">
              <div class="avatar_userName">
                <a href="/Info.html">
                  <div class="log_avatar">
                    <img src="image/emptyAvatar.jpg"> 
                  </div>  
                  <span class="userName">name</span>
                </a> 
              </div>

              <div class="hidden_first">
                <div class="triangle"></div>  
                <div class="user-list">
                  <div class="updateInfo" data-toggle="modal" data-target="#updateInfoModal">
                    <a href="/updateUserInfo.html">修改资料</a>
                  </div>
                  <div class="changePass" data-toggle="modal" data-target="#changePassModal">修改密码</div>
                  <div class="quit">退出</div>
                </div>
              </div>
            </div>
          </div> 
        </div>
      </div>
      <!-- logModal -->
      <div class="modal fade" id="logModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

        <div class="modal-dialog">
          <div class="modal-content">
            <div class="closeModal" data-dismiss="modal">
              <img src="image/CLOSE.png">
            </div>
            <div class="input-line">
              <img src="image/email.png" class="account-img">
              <input type="text" id="logAccount" placeholder="输入账号"/>
            </div>
            <div class="error"></div>
            <div class="input-line">
              <img src="image/lock.png" class="password-img">
              <input type="password" id="logPassword" placeholder="输入密码"/>
            </div>           
            <div class="error"></div>

            <div class="submit-holder">
              <img class="main-submit" src="image/login.png">
            </div>
            <div class="other_login">
              <img src="image/weibo.jpg">
              <span>其它登录：</span>
            </div>
          </div>
        </div>        
      </div>

      <!-- regModal -->
      <div class="modal fade" id="regModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="closeModal" data-dismiss="modal">
              <img src="image/CLOSE.png">
            </div>

            <div class="input-line">
              <div class="labels">
                <span>手机号码</span>
              </div>
              <input type="text" id="regPhone" class="short" placeholder="输入手机号码"/>
              <img class="getCode" src="image/getCode.png">
            </div>
            <div class="error"></div>
            <div class="input-line">
              <div class="labels">
                <span>验证码</span>
              </div>
              <input type="text" id="regCode" placeholder="输入手机验证码"/>
            </div>
            <div class="error"></div>
            <div class="input-line">
              <div class="labels">
                <span>密码</span>
              </div>
              <input type="password" id="regPassword" placeholder="输入密码"/>
            </div>           
            <div class="error"></div>
            <div class="input-line">
              <div class="labels">
                <span>密码</span>
              </div>
              <input type="password" id="regPassword2" placeholder="再次输入密码"/>
            </div>           
            <div class="error"></div>
            <div class="submit-holder">
              <img class="main-submit" src="image/reg.png">
            </div>
          </div>
        </div>        
      </div>

      <!-- changePassModal -->
      <div class="modal fade" id="changePassModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

        <div class="modal-dialog">
          <div class="modal-content">

            <div class="input-line">
              <input type="password" id="oldPassword" placeholder="输入旧密码"/>
            </div>
            <div class="error"></div>
            <div class="input-line">
              <input type="password" id="changePassword1" placeholder="输入新密码"/>
            </div>           
            <div class="error"></div>
            <div class="input-line">
              <input type="password" id="changePassword2" placeholder="确认新密码"/>
            </div>           
            <div class="error"></div>

            <div class="submit-holder">
              <img class="quit" src="image/cancel.png" data-dismiss="modal">
              <img class="main-submit" src="image/confirm.png">
            </div>
          </div>
        </div>        
      </div>
    </div>
    <div class="contentContainer">

    </div>

    
    <!-- 视频遮罩窗 -->
    <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="true">

    </div>
      <!-- 提问遮罩窗 -->
      <div class="modal fade" id="askModal" tabindex="-1" role="dialog" aria-labelledby="askModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content askContainer">
            <div class="askHeader">
              <p class="askTitle">提问</p>
              <div data-dismiss="modal" class="closeAskModalBtn"></div>
              
            </div>
            <div class="askBody">
              <div class="askInput">
                <h5 class="askLabel">输入标题</h5>
                <input type="text"  id="askTitleInput" placeholder="输入标题">
              </div>
              <div class="askInput">
                <h5 class="askLabel">问题说明</h5>
                <div class="uploadMediaBtn" id="uploadImg"></div>
                <div class="uploadMediaBtn" id="uploadVideo"></div>
                <p class="selectedFileName"></p>
                <textarea id="askDescription" placeholder="输入问题的描述，可以插入图片或视频"></textarea>
                <form enctype="multipart/form-data" action="msq/api/image" method="POST" target="hidden_frame">
                  <input type="file" name="image" id="fileInput"/>
                  <!--<input type="text" name="userId" />-->
                  <input type="submit" id="uploadBtn"/>
                <iframe name='hidden_frame' id="hidden_frame" style='display:none'></iframe> 
                </form> 
              </div>
              <div class="askTagGroup">
                <h5 class="askLabel">选择标签</h5>
                <div class="askTag">素描</div>
                <div class="askTag">色彩</div>
                <div class="askTag">速写</div>
                <div class="askTag">设计</div>
                <div class="askTag">报考</div>
                <div class="askTag">动漫</div>
                <div class="askTag">油画</div>
                <div class="askTag">书法</div>
                <div class="askTag">吐槽</div>
              </div>
              <div class="actionBtns">
                <button class="btn btn-primary btn-md" id="submitBtn">发布</button>
                <button class="btn btn-default btn-md" data-dismiss="modal" id="cancelBtn">取消</button>       
              </div>
            </div>
          </div>
        </div>
      </div>
    <!-- 画室环境遮罩窗 -->
    <div class="modal fade" id="environmentModal" tabindex="-1" role="dialog" aria-labelledby="environmentModalLabel" aria-hidden="true">
       <div class="modal-dialog">
          <div id="environment_tabs_con">
            <div id="environment_pic_tab" class="environment_tabs active" data-refer="0"></div>
            <div id="comments_tab" class="environment_tabs " data-refer="1"></div>
          </div>
          <div class="modal-content environmentContainer blackBg">
            <div id="closeEnvironmentModal" data-dismiss="modal" data-target="#environmentModal"></div><!-- 关闭按钮 -->
            <div id="myCarousel" class="carousel slide environmentTabBody show" data-refer="0"> 
               <!-- 轮播（Carousel）项目 -->
               <div class="carousel-inner">
                  <div class="item active">
                     <img src="image/painting.jpeg" alt="First slide">
                  </div>
                  <div class="item">
                     <img src="image/painting.jpeg" alt="Second slide">
                  </div>
                  <div class="item">
                     <img src="image/painting.jpeg" alt="Third slide">
                  </div>
               </div>
               <!-- 轮播（Carousel）指标 -->
               <div id="thumbnails">

                <img src="image/prevPage.png" alt="" class="thumbnailsControl left">

                 <ol class="mycarousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active">
                      <img src="image/painting.jpeg" alt="">
                    </li>
                    <li data-target="#myCarousel" data-slide-to="1">
                      <img src="image/painting.jpeg" alt="">
                    </li>
                    <li data-target="#myCarousel" data-slide-to="2">
                      <img src="image/painting.jpeg" alt="">
                    </li>
                 </ol>  
                 <img src="image/nextPage.png" alt="" class="thumbnailsControl right">
               </div>

               <!-- 轮播（Carousel）导航 -->
               <img src="image/prevSlide.png" alt="" class="left slideBtn" href="#myCarousel" data-slide="prev">
               <img src="image/nextSlide.png" alt="" class="right slideBtn" href="#myCarousel" data-slide="prev">
            </div> 
            <div id="comments" class="environmentTabBody" data-refer="1">
              <div class="commentActionBar">
                <button id="commentBtn" class="btn btn-primary ">我要评论</button>
                <textarea id="commentInput" rows="2"></textarea>
              </div>
              <div id="scrollBar">
                <div id="handle"></div>
              </div>
              <div class="commentsList">
                <div class="commentBlock">
                  <div class="left-avatar">
                    <img src="image/emptyAvatar.jpg" alt="">
                  </div>
                  <div class="right-text">
                    <h5 class="userName">刘建林</h5>
                    <p class="time">2014</p>
                    <p class="commentContent">不错不错</p>
                  </div>
                </div>
                <div class="commentBlock">
                  <div class="left-avatar">
                    <img src="image/emptyAvatar.jpg" alt="">
                  </div>
                  <div class="right-text">
                    <h5 class="userName">刘建林</h5>
                    <p class="time">2014</p>
                    <p class="commentContent">不错不错</p>
                  </div>
                </div>                <div class="commentBlock">
                  <div class="left-avatar">
                    <img src="image/emptyAvatar.jpg" alt="">
                  </div>
                  <div class="right-text">
                    <h5 class="userName">刘建林</h5>
                    <p class="time">2014</p>
                    <p class="commentContent">不错不错</p>
                  </div>
                </div>
                <div class="commentBlock">
                  <div class="left-avatar">
                    <img src="image/emptyAvatar.jpg" alt="">
                  </div>
                  <div class="right-text">
                    <h5 class="userName">刘建林</h5>
                    <p class="time">2014</p>
                    <p class="commentContent">不错不错</p>
                  </div>
                </div>
                <div class="commentBlock">
                  <div class="left-avatar">
                    <img src="image/emptyAvatar.jpg" alt="">
                  </div>
                  <div class="right-text">
                    <h5 class="userName">刘建林</h5>
                    <p class="time">2014</p>
                    <p class="commentContent">不错不错</p>
                  </div>
                </div>
                <div class="commentBlock">
                  <div class="left-avatar">
                    <img src="image/emptyAvatar.jpg" alt="">
                  </div>
                  <div class="right-text">
                    <h5 class="userName">刘建林</h5>
                    <p class="time">2014</p>
                    <p class="commentContent">不错不错</p>
                  </div>
                </div>
              </div>

            </div>
          </div>
       </div>
    </div>
  <!--carousel模板-->
  <script id="carousel-template" type="text/x-handlebars-template">
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
    {{#each environment}}
    {{#if @index}}
      <div class="item">
         <img src={{this}} alt="slide">
      </div>
    {{else}}
      <div class="item active">
         <img src={{this}} alt="slide">
      </div>
    {{/if}}
    {{/each}}
    </div>
    <!-- 轮播（Carousel）指标 -->
    <div id="thumbnails">

     <img src="image/prevPage.png" alt="" class="thumbnailsControl left">

      <ol class="mycarousel-indicators">
        {{#each environment}}
          {{#if @index}}
            <li data-target="#myCarousel" data-slide-to={{@index}}>
              <img src={{this}} alt="">
            </li>
          {{else}}
            <li data-target="#myCarousel" data-slide-to={{@index}} class="active">
              <img src={{this}} alt="">
            </li>
          {{/if}}
        {{/each}}
      </ol>  
      <img src="image/nextPage.png" alt="" class="thumbnailsControl right">
      </div>
      <!-- 轮播（Carousel）导航 -->
      <img src="image/prevSlide.png" alt="" class="left slideBtn" href="#myCarousel" data-slide="prev">
      <img src="image/nextSlide.png" alt="" class="right slideBtn" href="#myCarousel" data-slide="prev">
  </script>
  <!--画室评论列表模板-->
  <script id="comments-template" type="text/x-handlebars-template">
      {{#each studioComments}}
        <div class="commentBlock">
          <div class="left-avatar">
            <img src={{this.fromUserAvatarUrl}} alt="">
          </div>
          <div class="right-text">
            <h5 class="userName">{{this.fromUserName}}</h5>
            <p class="time">{{this.timestamp}}</p>
            <p class="commentContent">{{this.content}}</p>
          </div>
        </div>
      {{/each}}
  </script>
  <!-- 视频模板 -->
  <script id="videoModal-template" type="text/x-handlebars-template">
    <div class="modal-dialog">
      <div class="modal-content videoContainer">
        <div class="leftBlock">
           <video id="player" width="600" height="450" controls="controls" poster={{video.imageUrl}}>
             <source src={{video.videoUrl}} type="video/mp4">
            Your browser does not support the video tag.
          </video>
        </div>
        <div class="rightBlock">
          <div class="rightBlockHeader">
            <h4>{{video.title}}</h4>
          </div>
          <div class="rightBlockAboutTeacher">
            {{#if video.avatarUrl}}
            <img src={{video.avatarUrl}} alt="">
            {{else}}
            <img src="image/emptyAvatar.jpg" alt="">
            {{/if}}
            <h4>{{video.name}}</h4>
            <h5>我就一个画画的</h5>
          </div>
          <div class="rightBlockIntroduction">
            <h4>简介</h4>
            <p>{{video.description}}</p>
          </div>
          <div class="closeBtn" data-dismiss="modal" >
            <img src="image/closeVideo.png" alt="">
            <p>关闭视频</p>
          </div>
        </div>
      </div>
    </div>
  </script>
  <!--基本页面模板-->
  <script id="basic-template" type="text/x-handlebars-template">
    <div class="row">
      <div class="mainArticle col-md-8 col-xs-8 col-sm-8 col-lg-8">
        <div class="studioInfoContainer">
          <div class="studioAvaWrapper">
            <img src={{studio.avatarUrl}} alt="studioAvatar" class="studioAvatar">
          </div>
          <p class="studioName">{{studio.name}}</p>
          <div class="actionBtnGroup">
          {{#if studio.isWatched}}
            <button class="unfollowStudioBtn btn btn-primary">
              <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>取消关注
            </button>
          {{else}}
            <button class="followStudioBtn btn btn-primary">
              <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>关注
            </button>
          {{/if}}
            <button class="askStudioBtn btn btn-default" data-toggle="modal" data-target="#askModal">向它提问</button>
          </div>
          <ul class="studioInfoList">
            <li>
              <p>电话:{{studio.phone}}</p>
              <a href="#">拨打</a>
            </li>
            <li>
              <p>环境：7/10</p>
              <a href="" data-toggle="modal" data-target="#environmentModal" id="viewEnvironment">详情</a>
            </li>
            <li>
              <p>成绩：高分29% 合格率70%</p>
              <a href="#">详情</a>
            </li>
            <li>
              <p>收费：2500</p>
              <a href="#">详情</a>
            </li>
          </ul>
        </div>
        <div class="tabs">
          <ul>
            <li class="tab-nav active" data-ref="#problems">已回答</li>
            <li class="tab-nav" data-ref="#works">作品集</li>
            <li class="tab-nav" data-ref="#teachers">师资介绍</li>
            <li class="tab-nav" data-ref="#video">教学视频</li>
          </ul>
        </div>
        <div class="tabs-bodys">
          <!-- 已回答模板 -->
          <div class="tabs-body problems show" data-ref="#problems" id="problems">

          </div>
          <!--作品集模板-->
          <div class="tabs-body" data-ref="#works" id="works">

          </div>
          <!--师资模板-->
          <div class="tabs-body" data-ref="#teachers" id="teachers">

          </div>
          <!--教学视频模板-->
          <div class="tabs-body" data-ref="#video" id="videos">

          </div>
        </div>

      </div>

      <div class="col-md-4 col-xs-4 col-sm-4 col-lg-4">
        <div class="aside">
          <div class="row socialNum">
            <div class="fansNum" style="float:left; width:50%;">
              <p style="border-right: 1px solid #DCDCDC">
                <span>{{studio.fanNum}}</span></br>
                <a href="" id="fansLink">粉丝</a>
              </p>
            </div>
            <div style="float:left; width: 50%; ">
              <p>
                <span>{{studio.followNum}}</span></br>
                <a href="" id="followLink">关注</a>
              </p>
            </div>
          </div>
          <div class="pageView">
            <div class="pageViewSection2">
              <a href="" id="reportLink">举报用户</a>
              <a href="" id="blockLink">屏蔽用户</a>
            </div>
          </div>
          <div class="recruitBoard">
              <h4 class="recuitTitle">招聘教师</h4> 
            <div class="recuitSection">
              <h5 class="job">校长助理</h5>
              <ul class="jobDescription">
                <li>10K-15K</li>
                 <li>有一定美术基础</li>
              </ul>
            </div>
            <div class="recuitSection">
              <h5 class="job">校长助理</h5>
              <ul class="jobDescription">
                <li>10K-15K</li>
                 <li>有一定美术基础</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

    </div>
  </script>
  <!-- 已回答问题模板 -->
  <script id="problems-template" type="text/x-handlebars-template">
    {{#each problems}}
      <div class="articles" data-problemId={{_id}} data-userId={{userId}}>
        <div class="left-col">
          {{#if_empty avatarUrl}}
            <img src='image/emptyAvatar.jpg'>
          {{else}}
            <img src={{avatarUrl}}>
          {{/if_empty}}

          <div class="left-triangle"></div>
        </div> 
        <div class="right-col">
          <div class="problem-details">
            <h5><a href="/otherInfo.html?userId={{userId}}">{{name}}</a></h5>
            <h6>{{publishTime}}</h6>
            <p>
              {{#if_empty askTo}}
              {{else}}
                {{#if_studio askToType}}
                  <a href="/studio.html?studioId={{askTo}}">@{{askToName}} </a>  
                {{else}}
                  <a href="/otherInfo.html?userId={{askTo}}">@{{askToName}} </a>  
                {{/if_studio}}
              {{/if_empty}}
              {{content}}
            </p>
            <div class="paintings">
              {{#if hasImage}}          <!-- 判断问题是否有图片 -->
                <img src={{image}}>
              {{/if}}

            </div>
            <div class="tags-showAll">
              <img src="image/tags.png">
              {{#each tag}}
                <span class="tags">{{this}}</span>
              {{/each}}
              
              <a class="showAll" href="/Q&A_details.html?problemId={{_id}}">显示全部</a>
            </div>
          </div>
          <div class="problem-comment">
            <div class="left-zan">
              {{#if_zan isZan}}
                <img src="image/clickZan_active.png" class="active">
              {{else}}
                <img src="image/clickZan.png">
              {{/if_zan}}
              <span class="num">{{zan}}</span>
            </div>
            <div class="right-comment">
              <a href="/Q&A_details.html?problemId={{_id}}">
                <img src="image/comment.png">
                <span class="num">{{commentNum}}</span>
              </a>
            </div>
          </div>
        </div> 
      </div>
    {{/each}}
  </script>
  <!--教师列表模板-->
  <script id="teacherList-template" type="text/x-handlebars-template">
    <ul class="teacherlist">
    {{#each teachers}}
      <li>
        {{#if_empty avatarUrl}}
          <img src="image/emptyAvatar.jpg" alt="">
        {{else}}
          <img src={{this.avatarUrl}} alt="">
        {{/if_empty}}
        <h4>{{this.name}}</h4>
        <h5>我就一个画画的</h5>
      </li>
    {{/each}}
    </ul>
  </script>
  <!--教师列表模板-->
  <script id="teacherList-template" type="text/x-handlebars-template">
    <ul class="teacherlist">
    {{#each teachers}}
      <li>
        <img src={{this.avatarUrl}} alt="">
        <h4>{{this.name}}</h4>
        <h5>我就一个画画的</h5>
      </li>
    {{/each}}
    </ul>
  </script>
  <!--画室作品模板-->
  <script id="works-template" type="text/x-handlebars-template">
    {{#each works}}
      {{#firstInRow @index}}
        {{#if @index}}
          </div>
        {{/if}}
        <div class="pic_row">
      {{else}}
      {{/firstInRow}}
      <div class="pic_row_itemWrapper">
          <img src={{this}} alt="" class="pic_row_item">
      </div>
     
    {{/each}}
  </script>
  <!--招聘信息模板-->
  <script id="recuitSection-template" type="text/x-handlebars-template">
  <h4 class="recuitTitle">招聘教师</h4> 
  {{#each recruitments}}
    <div class="recuitSection">
      <h5 class="job">{{this.title}}</h5>
      <ul class="jobDescription">
        <li>{{this.salary}}</li>
         <li>{{this.description}}</li>
      </ul>
    </div>
  {{/each}}
  </script>
  <!--教学视频模板-->
  <script id="video-template" type="text/x-handlebars-template">

    <ul class="videolist">
      {{#each videos}}
      <li data-toggle="modal" data-target="#videoModal" data-videoid={{this.videoId}}>
        <img src={{this.imageUrl}} alt="">
        <h4>{{this.title}}</h4>
        <h5>{{this.description}}</h5>
      </li>
      {{/each}}
    </ul>

  </script>


  <script src="js/thirdparty/require.js" data-main="js/studio"></script>
  
      <div class="footer">
        <div class="footerContent">
          <ul class="footerList">
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">广告业务</a></li>
          </ul>
          <p class="icp">京备123号</p>
          <h2>美术帮</h2>
        </div>
      </div>
  </body>
</html>